<template>
  <!--<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>-->
  <!--<div id="allmap":style="{width: '100%', height: mapHeight + 'px'}"></div>-->
  <div id="allmap" v-bind:style="mapStyle"></div>
</template>

<script>

  export default{
    data:function(){
      return{
        mapStyle:{
        width:'100%',
        height:this.mapHeight +'px'
        }
      }
    },
    props:{
      // 地图在该视图上的高度
      mapHeight:{
        type:Number,
        default:500
      },
      // 经度
      longitude:{
        type:Number,
        default:116.404
      },
      // 纬度
      latitude:{
        type:Number,
        default:39.915
      },
      description:{
        type:String,
        default:'天安门'
      }
    },
    methods:function(){
      var map = new BMap.Map("allmap");
      var point = new BMap.Point(this.longitude,this.latitude);
      var marker = new BMap.Marker(point);
      map.addOverlay(marker);
      map.centerAndZoom(point,15);
      // 信息窗的配置信息
      var opts ={
        width :250,
        height:75,
        title :"地址：",
      }
      var infoWindow =new BMap.InfoWindow(this.description, opts);// 创建信息窗口对象
      marker.addEventListener("click",function(){
        map.openInfoWindow(infoWindow,point);
      });
      map.enableScrollWheelZoom(true);
      map.openInfoWindow(infoWindow,point);//开启信息窗口
    }
  }
</script>

<style lang="less" scoped>
  header{
        display: flex;
         height: 88px;
         padding-left: 2%;
        align-items: center;
        background: #27c1b4;
        justify-content: space-between;
        .leftReturn{
          padding-left: 20px;
        }
        .center{
          color: #FFFFFF;
          font-size: 30px;
        }
    }
  #allmap{
    width:750px;
    height:900px;
    border:#ccc solid 1px;
    font-size:12px
  }
</style>